<template>
    <Table     :columns="columns" :data="data" border  collapsible></Table>
</template>
<script>


import {
    getUserList, // 获取用户列表
    getGroupList // 获取角色列表1
} from "@/api/data";
export default {
    data() {
        return {
            columns: [
                {
                    title: '',
                    key: 'id',
                    width: 50,
                    ellipsis: true,
                    render: (h, params) => {
                        let _this = this
                        if(params.row.children && params.row.children.length > 0){
                            return h(
                                'div',
                                {
                                    class: {

                                    }
                                },
                                [
                                    h(
                                        'div',
                                        {
                                            class: {
                                                'ivu-table-cell-tree': true,
                                                'ivu-table-cell-tree-empty': (params.row.children && params.row.children.length > 0) ? false : true
                                            },
                                            style: {
                                                marginRight: '5px'
                                                
                                            }
                                        }, [h('Icon', {
                                            style: {
                                                cursor: 'pointer'
                                    
                                            },
                                            props: {
                                                type: !params.row.expand ? 'ios-add' : 'ios-remove'
                                            },
                                            on: {
                                                click: () => {
                                                    this.toogleRow(params.row, params.index)
                                                }
                                            }
                                        })]
                                    ),

                                    h(
                                        'Poptip',
                                        {
                                            props: {
                                                trigger: 'hover',
                                                placement: 'top',
                                                transfer: true,
                                                //content: params.row.name
                                            }
                                        },
                                        [
                                            h(
                                                'div',
                                                {
                                                    style: {
                                                        display: 'inline-block',
                                                        padding: '5px 0'
                                                    }
                                                },
                                                //params.row.name
                                            )
                                        ]
                                    )
                                ]
                            )
                        }else{
                            return '';
                        }
                    }
                },
                {
                    title: 'Name',
                    key: 'name'
                },
                {
                    title: 'Age',
                    key: 'age'
                },
                {
                    title: 'Address',
                    key: 'address'
                },
                {
                    title: "排序",
                    key: "paixu",
                    fixed: "right",
                    width: 100,
                    align: "center",
                    render: (h, params) => {
                        return h("Input", {
                            props: {
                                value: params.row.age,
                                size: "small",
                                placeholder: "请输入选择的数量",
                                type: "number"
                            },
                            on: {
                                input: (val) => {
                                    //this.delete(params.row);
                                    if(val>10){
                                        this.$Message.error("该账号已存在！");
                                    }
                                    this.sorted(params.row);
                                    //this.confirmType=true;
                                }
                            }
                        })
                    }
                },

                {
                    title: "操作",
                    key: "action",
                    fixed: "right",
                    minWidth: 150,
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                          
                            h(
                                "Tooltip",
                                {
                                    props: {
                                        trigger: "hover",
                                        content: "删除",
                                        placement: "top",
                                        transfer: true
                                    }
                                },
                                [
                                    h("Button", {
                                        props: {
                                            type: "error",
                                            size: "small",
                                            icon: "md-close",
                                            disabled: params.row.name === "super_admin"
                                        },
                                        on: {
                                            click: () => {
                                                this.delete(params.row);
                                            }
                                        }
                                    })
                                ]
                            )
                        ]);
                    }
                }
            ],
            data: [
                {
                    id: '100',
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    children: [
                        {
                            id: '1010055',
                            name: 'John Brown1888',
                            age: 18,
                            address: 'New York No. 1 Lake Park'
                        }
                    ]
                },
                {
                    id: '101',
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                    children: [
                        {
                            id: '10100',
                            name: 'John Brown1',
                            age: 18,
                            address: 'New York No. 1 Lake Park'
                            
                        },
                        {
                            id: '10101',
                            name: 'Joe Blackn1',
                            age: 30,
                            address: 'Sydney No. 1 Lake Park'
                        },
                        {
                            id: '10102',
                            name: 'Jon Snow1',
                            age: 26,
                            address: 'Ottawa No. 2 Lake Park',
                        }
                    ]
                },
                {
                    id: '102',
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                     children: [
                        {
                            id: '1010056',
                            name: '6J6ohn Brown1888',
                            age: 19,
                            address: '6New York No. 1 Lake Park'
                        }
                    ]
                },
                {
                    id: '103',
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    children: [
                        {
                            id: '1010057',
                            name: '6J6ohn Brown18899',
                            age: 188,
                            address: '6New York No. 1 Lake Park'
                        }
                    ]
                }
            ],
            data1:[]
        }
    },
    methods:{
        toogleRow(row, index) {
            if (row.expand) {
                this.data.splice(index + 1, row.children.length)
            } else {
                this.data.splice(index + 1, 0, ...row.children)
            }
            this.data[index].expand = !this.data[index].expand

        },
    // 点击按钮 - 删除
        delete(row) {
            this.$Modal.confirm({
                title: "已绑定该角色的用户将失去关联，确定删除？",
                onOk: async () => {
                    // 1.在角色列表删除
  
                    this.data1 = (await getUserList(1, 10)).data.data || [];
                    resultCallback(200, "删除成功！", () => {
                        console.log(this.data1);
                    });
                },
                closable: true
            });
        },
        sorted(row){
            console.log('sorted,成功！');
        }
     
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
 /deep/.ivu-table-cell-tree {
 
 .ivu-icon {
 
    font-size: 14px;
 
  }
 
}
</style>

